<template>
	<view>
		<view class="box-bg">
			<uni-nav-bar statusBar="true" shadow="true">
				<block slot="left">
					<view class="city">
						<view>
							<text class="uni-nav-bar-text">{{ city }}</text>
						</view>
						<uni-icons type="arrowdown" color="#666" size="18" />
					</view>
				</block>
				<view class="input-view">
					<uni-icons class="input-uni-icon" type="search" size="30" color="#999" />
					<input confirm-type="search" class="nav-bar-input" type="text" placeholder="输入搜索关键词"
						@confirm="confirm" />
				</view>
				<block slot="right">
					<view class="city">
						搜索
					</view>
				</block>
			</uni-nav-bar>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
				data() {
					return {
						city: '广安'
					}
				},
				methods: {
					back() {
						uni.navigateBack({
							delta: 1
						})
					},
					showMenu() {
						uni.showToast({
							title: '菜单'
						})
					},
					clickLeft() {
						uni.showToast({
							title: '左侧按钮'
						})
					},
					search() {
						uni.showToast({
							title: '搜索'
						})
					},
					showCity() {
						uni.showToast({
							title: '选择城市'
						})
					},
					scan() {
						uni.showToast({
							title: '扫码'
						})
					},
					confirm() {
						uni.showToast({
							title: '搜索'
						})
					}
				},
				onPullDownRefresh() {
					console.log('onPullDownRefresh')
					setTimeout(function() {
						uni.stopPullDownRefresh()
						console.log('stopPullDownRefresh')
					}, 1000)
				}
			}
</script>

<style lang="scss">
	$nav-height: 30px;
	
		.box-bg {
			background-color: #F5F5F5;
			padding: 5px 0;
		}
	
		.city {
			/* #ifndef APP-PLUS-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			align-items: center;
			justify-content: flex-start;
			// width: 160rpx;
			margin-left: 4px;
		}
	
		.input-view {
			/* #ifndef APP-PLUS-NVUE */
			display: flex;
			/* #endif */
			flex-direction: row;
			// width: 500rpx;
			flex: 1;
			background-color: #f8f8f8;
			height: $nav-height;
			border-radius: 15px;
			padding: 0 15px;
			flex-wrap: nowrap;
			margin: 7px 0;
			line-height: $nav-height;
		}
	
		.input-uni-icon {
			line-height: $nav-height;
		}
	
		.nav-bar-input {
			height: $nav-height;
			line-height: $nav-height;
			/* #ifdef APP-PLUS-NVUE */
			width: 370rpx;
			/* #endif */
			padding: 0 5px;
			font-size: 12px;
			background-color: #f8f8f8;
		}
</style>